<template>
    <div style="display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 70%;">
     x_o请在pc端打开,移动端暂未适配
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import axios from "axios";
import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import blog from "../../api/blog";
import nav from "../../api/nav";
import draggable from 'vuedraggable'
export default {
    name: "index",
    components: {
        Header,
        Footer,
        draggable
    },
    data() {
        return {
            upImgUrl: blog.upImgAvatar(),//上传图片链接
            nowTime: '',//当前时间
            //视频背景相关属性开始
            top: 0,//滚动条位置
            elm: '',//收起动画
            fixStyle: '',
            vedioCanPlay: '',
            //视频背景相关属性结束
            randomSrc: 's1',//随机视频
            searchtxt: '',//搜索内容
            showProgress: false,//显示进度条
            fadeOut: false,//fadeout动画
            pcShow: true,//是否在pc端展示
            searchTypeform: {//保存搜索表单
                name: '百度',
                background: '#484848',
                searchWidth: '73',
                searchUrl: 'https://www.baidu.com/s?wd=',
                seachBtn: '百度一下',
                placeHolder: '百度一下,你就知道'
            },
            searchList: [],//保存列表
            searchType: '站内',//当前选中搜索
            bgFilter: false,//背景是否隐藏
            searchAnimation: false,//搜索动画
            centerDialogVisible: false,//保存搜索表单是否显示
            collectDialogVisible: false,//保存网站表单是否显示
            editcollectDialogVisible: false,//编辑搜索表单是否显示
            isEdit: false,//是否处于编辑状态
            isCollectEdit: false,//收藏表单是否处于编辑状态
            dragPrent: 0,//拖拽
            collectClass: [],//当前所有的分类和子目录
            errorImg: 'this.src=`http://dlhtx.zicp.vip:3000/file/randomAvatar?time=${new Date().getTime()}`',
            collectForm: {//表单
                title: '',
                icon: '',
                href: ''
            },
            editCollectForm: {//表单
                title: '',
                icon: '',
                href: ''
            },
            collectIndex: 0,
            currentList: []
        };
    },
    watch: {
        '$route': function (newUrl, oldUrl) {
            this.nowTime = new Date().getTime();
        },
    },
    created() {
     
    },
    mounted() {
     
    },
    methods: {
       

    },
    computed: {
        ...mapGetters([
            // 'isLogin',
            // // 'user',
            // 'progress'
        ]),
    },
    watch: {
        dragPrent(e) {
            if (e > 0) {
                setTimeout(() => {
                    this.dragPrent = 0
                }, 500)
            }
        },
        progress(e) {
            if (e.show) {
                this.fadeOut = false
                this.showProgress = true
            } else {
                this.fadeOut = true
                setTimeout(() => {//在500毫秒之前播放fadeout动画
                    this.showProgress = false
                    this.fadeOut = false
                }, 500)
            }
        }
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/common.less";
@import "../../assets/css/animate.css";

.collectList {
    position: absolute;
    height: 54%;
    width: 80%;
    background: rgba(0, 0, 0, 0.6);
    top: 33%;
    left: 9%;
    transition: all 0.5s;
    border-radius: 1px;
    z-index: 3;
    .collectClass {
        width: 100%;
        background: #0c0c0c70;
        height: 44px;
        .collectItem {
            border-right: 1px solid #292929;
            height: 44px;
            line-height: 44px;
            text-align: center;
            display: inline-block;
            width: 70px;
            color: #bbbbbb;
            font-size: 10px;
            cursor: pointer;
            user-select: none;
            &:hover {
                background: #0c0c0c70;
            }
        }
        .collectEdit {
            &:hover {
                background: #0c0c0c70;
            }
        }
    }
    .collectConent {
        overflow-y: scroll;
        text-align: center;
        height: 89%;
        transition: all 0.5s;
        .collectSq {
            height: 132px;
            width: 13.5%;
            display: inline-block;
            text-align: center;
            line-height: 132px;
            position: relative;
            background: #3c3c3c85;
            margin: 8px 5px;
            padding: 0;
            &:hover {
                background: #61616185;
                transition: all 0.5s;
            }
            cursor: pointer;
            img {
                margin-top: 29px;
                object-fit: contain;
            }
            span {
                font-size: 10px;
                position: absolute;
                bottom: 27px;
                line-height: 20px;
                left: 5%;
                color: white;
                width: 90%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
        background: rgb(255, 44, 44);
    }
    100% {
        transform: rotateZ(360deg);
        background: red;
    }
}
.deleteBtn {
    animation: rotate 5s infinite !important;
    position: absolute;
    top: -6px;
    left: -6px;
    background: red;
    font-size: 4px;
    border-radius: 23px;
    width: 15px;
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    height: 15px;
}
.editBtn {
    // background: #7d7d7d9c;
    padding: 7px 9px;
    border-radius: 1px;
    cursor: pointer;
    &:hover {
        background: #7d7d7d9c;
    }
}
.bgFilter {
    height: 100%;
    width: 100%;
    z-index: 4;
    position: absolute;
    filter: 3px;
    background: #000000a1;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}
.downarrow {
    position: absolute;
    z-index: 999;
    width: 100px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-50px);
    top: 84%;
    text-align: center;
    color: white;
    font-size: 3rem;
    animation: breath 2s infinite;
    transition: all 0.5s;
    cursor: pointer;
    &:hover {
        color: #f3c32a !important;
        transition: all 0.5s;
    }
}
@keyframes breath {
    0% {
        opacity: 1;
        top: 84%;
    }
    50% {
        opacity: 0.3;
        top: 86%;
    }
    100% {
        opacity: 1;
        top: 84%;
    }
}
.video-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
    // filter: blur(5px);
}

.video-container .poster img,
.video-container video {
    z-index: 0;
    position: absolute;
    filter: blur(5px);
}

.video-container .filter {
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
}
.el-header {
    transition: all 0.5s;
}
.el-footer {
    height: auto !important;
    background: rgb(46, 48, 51);
    color: white;
    padding: 2vh;
}
.scrollToTop {
    animation-name: scroll;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
.scrollToDown {
    animation-name: scrollDown;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}
@keyframes scroll {
    0% {
        top: 0;
    }
    100% {
        top: -70px;
    }
}
@keyframes scrollDown {
    0% {
        top: -70px;
    }
    100% {
        top: 0;
    }
}
.logoImg {
    position: absolute;
    z-index: 999;
    width: 300px;
    left: 50%;
    transform: translateX(-150px);
    top: 23%;
}
.logo_text {
    position: absolute;
    z-index: 999;
    width: 1000px;
    left: 50%;
    -webkit-transform: translateX(-150px);
    transform: translateX(-500px);
    top: 38%;
    text-align: center;
    color: white;
    font-size: 2rem;
}
.logoInput {
    background: white;
    height: 50px;
    border-radius: 1px;
    position: absolute;
    z-index: 2;
    width: 600px;
    left: 50%;
    -webkit-transform: translateX(-250px);
    transform: translateX(-300px);
    top: 20%;
    transition: all 0.5s;
}
.logoInput input {
    height: 99%;
    width: 60%;
    border: none;
    background: #ff000000;
    outline: none;
    display: inline;
    padding-left: 10px;
}
.searchBtn {
    float: right;
    height: 50px;
    line-height: 50px;
    width: 74px;
    background: #232323;
    text-align: center;
    color: white;
    border-radius: 0 1px 1px 0;
    transition: all 0.5s;
    cursor: pointer;
    &:hover {
        background: #505050;
        transition: all 0.5s;
        width: 84px;
    }
}
</style>